<template>
  <view class="detail-container">
    <!-- 顶部事件卡片 -->
    <view class="event-card">
      <!-- 顶部图片和标题 -->
      <view class="event-header">
        <image class="event-image" :src="newsDetail.image" mode="aspectFill"></image>
        <view class="event-info">
          <view class="title-row">
            <text class="event-title">TOP1事件</text>
            <text class="fire-icon">🔥</text>
          </view>
          <button class="read-btn" @tap="readOriginal">阅读原文</button>
        </view>
      </view>

      <!-- 事件概要 -->
      <view class="event-summary">
        <text class="summary-title">事件概要</text>
        <text class="summary-content">{{newsDetail.content}}</text>
      </view>

      <!-- 关注按钮 -->
      <view class="follow-btn-wrap">
        <button class="follow-btn" 
                :class="{active: isFollowed}"
                @tap="handleFollow">
          {{isFollowed ? '已关注' : '关注事件'}}
        </button>
      </view>
    </view>

    <!-- 关注用户列表 -->
    <view class="follow-section">
      <view class="section-header">
        <text class="title">关注群众</text>
        <text class="count">({{followers.length}}人)</text>
      </view>
      
      <scroll-view scroll-x class="avatar-list" show-scrollbar="false">
        <view class="avatar-wrap">
          <view class="avatar-item" 
                v-for="(user, index) in followers" 
                :key="index">
            <image :src="user.avatar" mode="aspectFill"></image>
          </view>
          <text class="more-text" v-if="hasMoreFollowers">...</text>
        </view>
      </scroll-view>
    </view>

    <!-- 群众发声区域 -->
    <view class="comment-section">
      <view class="section-header">
        <text class="title">群众发声</text>
      </view>
      
      <view class="top-comment" v-if="topComment">
        <text class="pin-tag">置顶评论</text>
        <text class="comment-content">{{topComment.content}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsDetail: {
        id: '',
        image: '',
        content: '中国古代文化源远流长，典籍著作浩如烟海，种类繁多，这些著作皆含义深刻，内容精粹，值得我们现代人深切体会知行细玩味。说到这其中的著作，就不能不提及被世人誉为"亦世奇书"的《孙子兵法》',
        originalUrl: ''
      },
      followers: [],
      hasMoreFollowers: false,
      isFollowed: false,
      topComment: null
    }
  },

  onLoad(options) {
    this.newsDetail.id = options.id
    this.initPageData()
  },

  methods: {
    // 初始化页面数据
    async initPageData() {
      Promise.all([
        this.getNewsDetail(),
        this.getFollowers(),
        this.getTopComment(),
        this.checkFollowStatus()
      ])
    },

    // 获取新闻详情
    async getNewsDetail() {
      try {
        const res = await uni.request({
          url: `/api/news/detail/${this.newsDetail.id}`
        })
        this.newsDetail = {...this.newsDetail, ...res.data}
      } catch (error) {
        this.showError('获取详情失败')
      }
    },

    // 获取关注用户列表
    async getFollowers() {
      try {
        const res = await uni.request({
          url: `/api/news/followers/${this.newsDetail.id}`
        })
        this.followers = res.data.list
        this.hasMoreFollowers = res.data.hasMore
      } catch (error) {
        console.error('获取关注用户失败', error)
      }
    },

    // 获取置顶评论
    async getTopComment() {
      try {
        const res = await uni.request({
          url: `/api/news/top-comment/${this.newsDetail.id}`
        })
        this.topComment = res.data
      } catch (error) {
        console.error('获取置顶评论失败', error)
      }
    },

    // 检查关注状态
    async checkFollowStatus() {
      try {
        const token = uni.getStorageSync('token')
        if (!token) return
        
        const res = await uni.request({
          url: `/api/news/follow/check/${this.newsDetail.id}`,
          header: { token }
        })
        this.isFollowed = res.data.isFollowed
      } catch (error) {
        console.error('检查关注状态失败', error)
      }
    },

    // 处理关注/取消关注
    async handleFollow() {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }

      try {
        const url = `/api/news/follow/${this.newsDetail.id}`
        const method = this.isFollowed ? 'DELETE' : 'POST'
        
        await uni.request({
          url,
          method,
          header: { token }
        })

        this.isFollowed = !this.isFollowed
        await this.getFollowers() // 刷新关注列表
        
        uni.showToast({
          title: this.isFollowed ? '关注成功' : '已取消关注',
          icon: 'none'
        })
      } catch (error) {
        this.showError('操作失败')
      }
    },

    // 阅读原文
    readOriginal() {
      if (this.newsDetail.originalUrl) {
        uni.navigateTo({
          url: `/pages/webview/webview?url=${encodeURIComponent(this.newsDetail.originalUrl)}`
        })
      }
    },

    // 统一错误提示
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
}
</script>
<style lang="scss">
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;

  .event-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .event-header {
      display: flex;
      margin-bottom: 20rpx;

      .event-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .event-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title-row {
          display: flex;
          align-items: center;

          .event-title {
            color: #8c2bff;
            font-size: 32rpx;
            font-weight: bold;
          }

          .fire-icon {
            margin-left: 10rpx;
          }
        }

        .read-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background: #8c2bff;
          color: #fff;
          border-radius: 30rpx;
          font-size: 26rpx;
        }
      }
    }

    .event-summary {
      margin-bottom: 20rpx;

      .summary-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .summary-content {
        font-size: 28rpx;
        line-height: 1.6;
        color: #333;
      }
    }

    .follow-btn-wrap {
      display: flex;
      justify-content: center;
      padding: 20rpx 0;
      border-top: 1rpx solid #eee;

      .follow-btn {
        width: 240rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #f0f0f0;
        border-radius: 36rpx;
        color: #666;
        font-size: 28rpx;

        &.active {
          background: #f0e6ff;
          color: #8c2bff;
        }
      }
    }
  }

  .follow-section {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 30rpx;
        font-weight: 500;
      }

      .count {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }

    .avatar-list {
      white-space: nowrap;

      .avatar-wrap {
        display: inline-flex;
        align-items: center;
        padding: 10rpx 0;

        .avatar-item {
          margin-right: 20rpx;

          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
          }
        }

        .more-text {
          color: #999;
          font-size: 24rpx;
        }
      }
    }
  }

  .comment-section {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;

    .section-header {
      margin-bottom: 20rpx;

      .title {
        font-size: 30rpx;
        font-weight: 500;
      }
    }

    .top-comment {
      background: #f8f8f8;
      padding: 20rpx;
      border-radius: 8rpx;

      .pin-tag {
        color: #8c2bff;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        display: block;
      }

      .comment-content {
        font-size: 28rpx;
        line-height: 1.6;
        color: #333;
      }
    }
  }
}
</style>